﻿function navigation(xml) {
    var that = this;
    this.data = $(xml);
    this.leftData = [];
    this.rightData = [];

    this.leftPartnerLinkName = [];
    this.rightPartnerLinkName = [];

    this.getPartnerLinkName = function () {
        $(this.data).find("partnerLink").each(function () {
            if ($(this).attr("myRole") != undefined) {
                that.leftPartnerLinkName.push($(this).attr("name"));
            } else {
                that.rightPartnerLinkName.push($(this).attr("name"));
            }
        })
    }

    this.getLeftData = function () {
        this.data.find("onMessage").each(function () {
            if ($(this).attr("partnerLink") != undefined) {
                that.leftData.push($(this));
            }
        })
        this.data.find("onEvent").each(function () {
            if ($(this).attr("partnerLink") != undefined) {
                that.leftData.push($(this));
            }
        })
    }

    this.getRightData = function () {
        this.data.find("invoke").each(function () {
            if ($(this).attr("partnerLink") != undefined) {
                that.rightData.push($(this));
            }
        })
    }

    this.getResult = function () {
        this.getPartnerLinkName();
        this.getLeftData();
        this.getRightData();
        var result = { left: [], right: [] };
        if (this.leftData.length == 0 && this.rightData.length == 0) {
            return [];
        }

        for (var j = 0; j < this.leftPartnerLinkName.length; j++) {
            var leftResult = { partnerName: '', children: [] };
            leftResult.partnerName = this.leftPartnerLinkName[j];
            for (var i = 0; i < this.leftData.length; i++) {
                if (this.leftPartnerLinkName[j] == this.leftData[i].attr("partnerLink")) {
                    leftResult.children.push(this.leftData[i]);
                }
            }
            result.left.push(leftResult);
        }

        for (var j = 0; j < this.rightPartnerLinkName.length; j++) {
            var rightResult = { partnerName: '', children: [] };
            rightResult.partnerName = this.rightPartnerLinkName[j];
            for (var i = 0; i < this.rightData.length; i++) {
                if (this.rightPartnerLinkName[j] == this.rightData[i].attr("partnerLink")) {
                    rightResult.children.push(this.rightData[i]);
                }
            }
            result.right.push(rightResult);
        }
        return result;
    }

    this.renderNavigation = function (diagram, processWidth) {
        var result = this.getResult();
        this.renderLeft(diagram, result, "left", processWidth);
        this.renderLeft(diagram, result, "right", processWidth);
    }

    var childrenWidth = 20;
    var paddingBottomProcess = 30;
    var lv1Width = 150;
    var textPadding = 20;
    var textTop = 10;
    var lv1ImagePadding = 80;
    var lv1LastImgPadding = 130;
    var lv2PaddingTop = 35;
    var lv2FirstImgX = 3;
    var lv1ContainerPadding = 0;
    var addLv1Width = 0;
    var imgUrl = "";

    this.textArr = [];

    this.renderLeft = function (diagram, result, tag, processWidth) {
        if (result == undefined || result.length == 0) {
            return;
        }
        addLv1Width = 0;
        var result = result[tag];
        if (tag == "left") {
            lv1ContainerPadding = -100;
            imgUrl = "resource/images/ServicePartnerLink_45x32.gif";
        }
        else {
            lv1ContainerPadding = parseInt(processWidth) - 30;
            textPadding = 80;
            lv1ImagePadding = 15;
            lv1LastImgPadding = 0;
            imgUrl = "resource/images/ReferencePartnerLinkPrivate_45x32.gif";
        }
        //add lv 1 container
        for (var i = 0; i < result.length; i++) {
            if (result[i].children.length == 0) {
                continue;
            }
            else {
                var y = 0;
                if (i == 0) {
                    addLv1Width = paddingBottomProcess + result[i].children.length * 25 * i;
                }
                //add lv1 container include(rect, text, img, lastImg, lv2 Container)
                var lv1Container = new NodeContainer({ x: lv1ContainerPadding, y: addLv1Width }, { w: lv1Width, h: childrenWidth + result[i].children.length * childrenWidth + 30 }, "transparent");
                addLv1Width += parseInt(lv1Container._size.h) + 20;
                lv1Container._domEl.attr("stroke", "none").attr("tag", i);
                var text = new Text({ x: textPadding, y: textTop + textPaddingTop }, { w: 0, h: 0 }, result[i].partnerName);
                var img = new Image({ x: lv1ImagePadding, y: 0 }, { w: 45, h: 32 }, imgUrl);
                var lastImg = new Image({ x: lv1LastImgPadding, y: 0 }, { w: 16, h: 16 }, "resource/images/menu_16x16.png");
                var lv2Container = new NodeContainer({ x: 0, y: lv2PaddingTop }, { w: lv1Width, h: childrenWidth * result[i].children.length }, "white", { r: 6 });
                for (var j = 0; j < result[i].children.length; j++) {
                    var lv2_img = new Image({ x: 3, y: 3 + 16 * j }, { w: 16, h: 16 }, "resource/images/MEP_out_in_16x16.png");
                    var lv2_text = new Text({ x: 20, y: 3 + textPaddingTop + 16 * j }, { w: 0, h: 0 }, result[i].children[j].attr("operation"));
                    lv2_text.text.attr("tag", result[i].partnerName + "_" + result[i].children[j].attr('operation'));
                    lv2_text.text.attr("types", tag);

                    this.textArr.push(lv2_text.text);

                    var lv2_rightImg = null;
                    if (tag == "left") {
                        lv2_rightImg = new Image({ x: 130, y: 4 + 16 * j }, { w: 12, h: 12 }, imageMap["stop"]);
                    }
                    lv2Container.addChildren(lv2_img);
                    lv2Container.addChildren(lv2_text);
                    if (tag == "left") {
                        lv2Container.addChildren(lv2_rightImg);
                    }

                    diagram.addElement(lv2_img);
                    diagram.addElement(lv2_text);
                    if (tag == "left") {
                        diagram.addElement(lv2_rightImg);
                    }
                }

                //add lv1 children, lv2 to lv1--->the lv1 parent is the top container
                lv1Container.addChildren(text);
                lv1Container.addChildren(img);
                lv1Container.addChildren(lastImg);
                lv1Container.addChildren(lv2Container);
                //add lv2 
                processEl.addChildren(lv1Container);
                diagram.addElement(lv1Container);
                diagram.addElement(text);
                diagram.addElement(img);
                diagram.addElement(lastImg);
            }
        }
        this.regEvent();
    }

    this.regEvent = function () {
        for (var i = 0; i < this.textArr.length; i++) {
            var textList = d3.selectAll("text")[0];
            var rectList = d3.selectAll("rect")[0];
            this.textArr[i].on("click", function () {
                var _tag = this.getAttribute("tag");
                for (var i = 0; i < textList.length; i++) {
                    textList[i].setAttribute("fill", "rgb(0,0,127)");
                    if (textList[i].getAttribute("tag") == _tag) {
                        textList[i].setAttribute("fill", "red");
                        if (textList[i].getAttribute("inRect")) {
                            window.scrollTo(0, parseInt(textList[i].getAttribute("y")) - 60);
                        }
                    }
                }

                for (var i = 0; i < rectList.length; i++) {
                    rectList[i].setAttribute("fill", "white");
                    if (rectList[i].getAttribute("tag") == _tag) {
                        rectList[i].setAttribute("fill", "yellow");
                        window.scrollTo(0, rectList[i].getAttribute("y"));
                    }
                }
            })
        }
    }
}